<template>
  <div class="view">
    <div id="imgDiv">
      <div class="swiper" v-for="(item,index) in imgs">
        <img :src="item.url" alt="" class="img" :id="'pic'+index">
        <div class="text">{{item.content}}</div>
      </div>
    </div>
    <ul class="ul-c">
      <li class="li-point" v-for="(item,index) in imgs" :class="{active:index==currentIndex}"></li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "Swiper",
    props:{
      imgs:{
        type:Array
      }
    },
    data() {
      return {
        currentIndex: 0
      }
    },
    computed: {
      imgDoms() {
        return document.getElementById('imgDiv').children;
      },
      width(){
        return this.imgDoms[0].offsetWidth
      }
    },
    mounted() {
      this.imgDoms[1].style.left='0px'

      let that=this
      setInterval(() => {
        that.autoPlay()
        that.slide(that.currentIndex)
      }, 3000)
    },
    methods: {
      autoPlay() {
        this.currentIndex++
        this.currentIndex %= 3
      }
      ,
      slide(index) {
        let start=0
        let width =this.width
        let long=100
        let delay=5
        let step=1.0*width/(long/delay)
        let timer=setInterval(
          ()=>{
            start-=step
            if(start<=-width){
              start=-width
              clearInterval(timer)
            }
            this.imgDoms[index].style.left=start+'px'
            this.imgDoms[(index+1)%3].style.left=width+start+'px'
          },delay
        )
      }
    }
  }
</script>

<style scoped>
  .view {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
  }
  .swiper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 100%;
  }
  .img{
    width: 100%;
    height: 100%;
  }
  .text{
    float: left;
    position: absolute;
    bottom: 10px;
    color: white;
    font: 28px "宋体";
    font-weight: 600;
  }


  .ul-c{
    list-style: none;
    position: absolute;
    bottom: 10px;
    right:10px;
  }
  .li-point{
    float: left;
    margin-left: 20px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: white;
    z-index: 10;
  }
  .active{
    float: left;
    margin-left: 20px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #666666;
    z-index: 10;
  }


</style>